<template>
  <div>
    <el-row>
        <div class="grid-content bg-purple-dark">服务项列表信息</div>
    </el-row>

    <el-row>
        <div class="grid-content1 bg-purple">
          政务类信息
          <el-row>
            <div class="government">
              <el-button>法院综合信息<br />5积分/次</el-button>
              <el-button type="primary">社保<br />1积分/次</el-button>
              <el-button type="warning">公积金<br />1积分/次</el-button>
              <el-button type="success">央行简版征信<br />2积分/次</el-button>
            </div>
          </el-row>
        </div>
        <div class="grid-content2 bg-purple-light">
          生活行为类信息
          <div class="live">
            <el-button>运营商<br/>3积分/次</el-button>
            <el-button type="primary">淘宝<br />3积分/次</el-button>
            <el-button type="warning">支付宝<br />3积分/次</el-button>
            <el-button type="success">银行卡<br/>2积分/次</el-button>
            <el-button type="danger">京东<br>2积分/次</el-button>
            <el-button type="primary" plain>美团<br>2积分/次</el-button>
          </div>
        </div>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  font-family: 宋体;
  font-size: 15px;
}
.grid-content1 {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  font-family: 宋体;
  font-size: 15px;
  margin-left: 30px;
  height: 220px;
  // line-height:220px;
}
.grid-content2 {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  font-family: 宋体;
  font-size: 15px;
  margin-left: 30px;
  height: 220px;
  // line-height:220px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.government {
  width: 700px;
  height: 70px;
  // background:skyblue;
  margin-left: 150px;
  padding: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.live {
  width: 900px;
  height: 70px;
  // background:skyblue;
  margin-left: 60px;
  padding: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

</style>
